<template>
	<view class="upFile" >
		<view class="media" v-if="!fileType">
			<view v-if="!type" class="multiple">
				<view class="imageList">
					<view class="imageItem" v-for="(item,index) in fileList" :key='index'>
						<image :style="{
							width:width,
							height:height
						}"  :src="item[valueKey] " @click="seeImage(index)" mode="aspectFill"></image>
						<view class="close" @click="removeFile('multiple',index)"  v-if="compile">
							<image :src="closeImg"></image>
						</view>
					</view>
					<view class="addFile" v-if="compile && fileList.length < config.count">
						<image :style="{
							width:width,
							height:height
						}" :src="background" mode="上传文件" @click="uploadFile('multiple')"></image>
						<text>{{upImgText}}</text>
					</view>
				</view>
			</view>
			<view v-else class="single">
				<view :style="{
						width:width,
						height:height
					}" class="addFile" >
					<image mode="aspectFill" :src="fileList[0] && fileList[0][valueKey] || background" @click="uploadFile('single')"></image>
					<view class="close" @click="removeFile('single')" v-if="fileList.length && compile" >
						<image :src="closeImg"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="accessory" v-else>
			
		</view>
	</view>
</template>
<script>
	export default {
		data(){
			return {
				// 文件列表
				fileList:[], 
				// 删除的文件id
				removeList:[],
			}
		},
		props:{
			config:{
				type: Object,
				default:{
					count:1,         							// 上传图片张数
					sizeType: ['original','compressed'], 				// original 原图，compressed 压缩图，默认二者都有
					sourceType:	['album','camera'],								// album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
				}
			},
			// 0 表示媒体文件 1 附件  默认为0
			fileType:{
				type: Number,
				default: 0,
			},
			// 0 表示上传多张图片模式 1 表示上传一张模式  当type设置为1时count无效
			type:{
				type: Number,
				default: 0,
			},
			// 上传图片的背景
			background:{
				type: String,
				default:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-hglbk3dir3rbd07f5a/2efd0ea0-5718-11eb-8a36-ebb87efcf8c0.png',
			},
			// 删除图片
			closeImg:{
				type: String,
				default:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-14mxvwe8lug756a025/12e55e20-50b0-11eb-b680-7980c8a877b8.png',
			},
			// 0 阿里云上传 1 腾讯云 2 自定义上传  默认为0
			upFileType:{
				type: Number,
				default:0,
			},
			// 展示图片的key
			valueKey:{
				type: String,
				default:'url',
			},
			// 图片的宽度
			width:{
				type: String,
				default:'210rpx',
			},
			// 图片的高度
			height:{
				type: String,
				default:'210rpx',
			},
			// 需要展示的图片数组
			values:{ 
				type: Array,
				default:() => [],
			},
			// true是编辑模式上传 false查看模式只能查看
			compile:{ 
				type: Boolean,
				default:() => true,
			},
			// 自定义文字
			upImgText:{ 
				type: String,
				default:() => ' ',
			},
		},
		created(){
			this.reset()
		},
		mounted(){
		},
		watch:{
		    values(n,o){ //n为新值,o为旧值;
		      this.fileList = n;
		    }
		},
		methods:{
			reset(){
				this.fileList = [...this.values] || []
				this.removeList = []
			},
			updataFile(){
				//前端代码
				uni.chooseImage({
					count: this.type || this.config.count,
					sizeType: this.config.sizeType,
					sourceType: this.config.sourceType,
					success: (res) => {
						if (res.tempFiles.length > 0) {
							switch (this.upFileType){
								case 1:
									
									break;
								case 2:
									this.$emit('upLoadFile',res)
									break;
								default:
									let count = 0 
									uni.showLoading({
										title: '正在上传',
										mask:true,
									});
									let upFile = async (data) => {
										if(data.length > count){
											console.log(uniCloud)
											const result = await uniCloud.uploadFile({
												filePath: data[count].path,
												cloudPath: data[count].name || data[count].path.match(/[^\/]+$/)[0],  // 只有h5能获取到图片的名字
												onUploadProgress: function(progressEvent) {
													// this.$emit('onUploadProgress',progressEvent)
												}
											});
											this.fileList.push({size:data[count].size,name:data[count].name,[this.valueKey]:result.fileID})
											count++
											upFile(data)
										}else{
											uni.hideLoading()
											this.fileListChange()
										}
									}
									upFile(res.tempFiles)
									break;
							}
							
						}else{
							uni.showToast({
								title: '获取图片失败请刷新重试',
								icon:'none',
								duration: 2000
							});
						}
					},
					fail(res){
						console.log(res)
						uni.showToast({
							title: res,
							icon:'none',
							duration: 2000
						});
					},
					complete(res){
					}
				})
			},
			seeImage(index_ = 0){
				let images = []
				this.fileList.forEach(el => {
					if(/\.(png|jpg|jpeg|gif|webp|svg|webm)$/.test(el[this.valueKey])){
						images.push(el[this.valueKey])
					}
				})
				if(images.length){
					uni.previewImage({
						urls:images,
						current:index_
					})
				}
			},
			uploadFile(type){
				if('single' === type){
					if(this.fileList.length){
						this.seeImage()
						return 
					}
					this.reset()
				}
				this.updataFile()
			},
			removeFile(type,index){
				if('single' === type){
					this.removeList = [...this.fileList]
					this.fileList = []
				}else if('multiple' === type){
					this.removeList.push(this.fileList[index])
					this.fileList.splice(index,1)
				}
				this.fileListChange()
			},
			// 当图片上传或者删除时都会触发这个函数
			fileListChange(){
				this.$emit('fileListChange',{
					fileList:this.fileList,
					removeList:this.removeList
				})
			}
		}
	}
</script>

<style lang="scss">
	.upFile{
		
		.addFile{
			position: relative;
			
			image{
				width: 100%;
				height: 100%;
				cursor: pointer;
				border-radius: 6rpx;
			}
			
			text{
				left: 50%;
				bottom: 20%;
				position: absolute;
				white-space: nowrap;
				transform: translateX(-50%);
			}
		}
		
		.imageList{
			padding: 10rpx 0;
			
			>view{
				margin-right: 20rpx;
				margin-bottom: 16rpx;
				display: inline-block;
			}
			
			image{
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
			
			.imageItem{
				position: relative;
			}
			
			// .close{
			// 	top: -20rpx;
			// 	right: 8%;
			// }
		}
		
		.close{
			width: 60rpx;
			height: 60rpx;
			top: -20rpx;
			right: -20rpx;
			padding: 10rpx;
			position: absolute;
			
		}
	}
</style>
